<template>
  <div>
    <a-icon @click="addFilter()" style="cursor: pointer;margin-left: 97%;color: #1890ff;" :title="$ti18('rxList.newBtn','添加')" type="plus"/>
    <a-table :bordered="true" :columns="filterColumns"
             :dataSource="filterList"
             :defaultExpandAllRows="true"
             :indentSize="40" :pagination="false">
      <template name="filterName" slot="filterName" slot-scope="text,record">
        <a-select style="width:100%" @change="changeFilterName(record)" :options="filterOptions" :allowClear="true"
                  v-model="record.filterName" :getPopupContainer="p=>p.parentNode"></a-select>
      </template>
      <template name="filterArgs" slot="filterArgs" slot-scope="text,record">
        <component ref="filterArgs"
                   v-model="record"
                   :is="record.currentComponet">
        </component>
      </template>
      <template name="action" slot="action" slot-scope="text,record,index">
        <a-icon @click="delFilter(index)" style="cursor: pointer;color:red;" :title="$ti18('rxList.delBtn','删除')" type="delete"/>
      </template>
    </a-table>
  </div>
</template>

<script>

  import StripPrefixEdit from './filter/StripPrefixEdit'
  import AddRequestParameterEdit from './filter/AddRequestParameterEdit'
  import AddRequestHeaderEdit from './filter/AddRequestHeaderEdit'
  import AddResponseParameterEdit from './filter/AddResponseParameterEdit'
  import AddResponseHeaderEdit from './filter/AddResponseHeaderEdit'
  import PreserveHostHeaderEdit from './filter/PreserveHostHeaderEdit'
  import RewritePathEdit from './filter/RewritePathEdit'
  import PrefixPathEdit from './filter/PrefixPathEdit'

  export default {
    name: "FilterList",
    props: ["filters"],
    components: {
      StripPrefixEdit,
      AddRequestParameterEdit,
      AddRequestHeaderEdit,
      AddResponseHeaderEdit,
      AddResponseParameterEdit,
      PreserveHostHeaderEdit,
      RewritePathEdit,
      PrefixPathEdit
    },
    data() {
      return {
        filterColumns: [
          {
            title: this.i18n('form.filterName','过滤器名称'),
            dataIndex: 'filterName',
            key: 'filterName',
            width: 150,
            scopedSlots: {customRender: 'filterName'},
          },
          {
            title: this.i18n('form.filterArgs','过滤器参数'),
            dataIndex: 'filterArgs',
            key: 'filterArgs',
            width: 250,
            scopedSlots: {customRender: 'filterArgs'},
          },
          {
            title: this.$ti18('rxList.action','操作'),
            dataIndex: 'action',
            width: 20,
            scopedSlots: {customRender: 'action'}
          }
        ],
        filterOptions: [
          {value: "AddRequestParameter", label: this.i18n('filterList.AddRequestParameter','添加请求参数')},
          {value: "AddRequestHeader", label: this.i18n('filterList.AddRequestHeader','添加请求头')},
          {value: "AddResponseParameter", label: this.i18n('filterList.AddResponseParameter','添加响应参数')},
          {value: "AddResponseHeader", label: this.i18n('filterList.AddResponseHeader','添加响应头')},
          {value: "PreserveHostHeader", label: this.i18n('filterList.PreserveHostHeader','维持Host头')},
          {value: "RewritePath", label: this.i18n('filterList.RewritePath','重写请求路径')},
          {value: "PrefixPath", label: this.i18n('filterList.PrefixPath','路由添加前缀')},
          {value: "StripPrefix", label: this.i18n('filterList.StripPrefix','截断的路径')},
        ],
        filterList: [],
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"SysRouting",key);
      },
      init() {
        const {filters} = this;
        if (filters){
          if (filters.length > 0) {
            for (var i = 0; i < filters.length; i++) {
              this.filterList.push({
                filterName: filters[i].name,
                filterArgs: filters[i].args,
                currentComponet:filters[i].name+"Edit"
              });
            }
          }
        }
      },
      addFilter() {
        this.filterList.push({
          filterName: "",
          filterArgs: "",
          currentComponet:PrefixPathEdit
        });
      },
      delFilter(index) {
        this.filterList.splice(index, 1);
      },
      changeFilterName(record) {
        record.filterArgs = "";
        if(record.filterName){
          record.currentComponet = record.filterName+"Edit";
        }else {
          record.currentComponet=PrefixPathEdit;
        }
      },
    },
    watch:{
      filters:function (val,oldval) {
        this.init();
      }
    }

  }
</script>

<style scoped>
</style>